<template>
    <el-card
        class="title-card mb-10"
        shadow="never"
        style="border: none; background: #fff"
    >
        <div class="title">资源动态</div>
    </el-card>
    <el-card
        class="content-card"
        shadow="never"
        style="border: none; background: #fff"
    >
        <div class="operator_line">
            <el-input v-model="keyword" class="input" :prefix-icon="Search" />
            <el-button class="search_btn" color="#eeeeee" plain>搜索</el-button>
            <div class="select_area">
                <span>资源类型: </span>
                <el-select
                    class="select"
                    v-model="classification"
                    placeholder="全部资源"
                >
                    <el-option
                        v-for="item in resourceList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
                <span>状态: </span>
                <el-select class="select" v-model="status" placeholder="全部">
                    <el-option
                        v-for="item in statusList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
        </div>

        <!-- 表格 -->
        <!-- :data="tableData" -->
        <el-table
            class="table"
            style="width: 100%"
            :data="tableData"
            :header-cell-style="{ background: '#f5f7f9' }"
        >
            <el-table-column width="410" label="内容" align="center">
                <template #default="{ row, $index }">
                    <div class="table_one">
                        <img class="img" :src="row.cover[0]" />
                        <div class="desc">
                            <div class="content">
                                {{ row.momentClassificationBackup.workTitle }}
                            </div>
                            <div class="type">动态</div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="发布时间" width="150">
                <template #default="{ row, $index }">
                    <div class="time">
                        {{ Moment(row.createTime).format("YYYY.MM.DD hh:mm") }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="数据" width="134">
                <template #default="{ row, $index }">
                    <div class="table_two">
                        <div class="item">
                            <span class="iconfont icon-dianzan"></span>
                            <span class="count">{{
                                row.statisticsBackup.favoriteCount
                            }}</span>
                        </div>
                        <div class="item">
                            <span class="iconfont icon-pinglun"></span>
                            <span class="count">{{
                                row.statisticsBackup.commentCount
                            }}</span>
                        </div>
                        <div class="item">
                            <span class="iconfont icon-shoucang"></span>
                            <span class="count">{{
                                row.statisticsBackup.userCacheCount
                            }}</span>
                        </div>
                        <div class="item">
                            <span class="iconfont icon-guankan"></span>
                            <span class="count">{{
                                row.statisticsBackup.viewCount
                            }}</span>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="状态" width="133">
                <template #default="{ row, $index }">
                    <div class="table_three">
                        <span class="desc">仅主页可见</span>
                        <span class="why">查看原因</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="133">
                <template #default="{ row, $index }">
                    <div class="table_four">
                        <span class="handler">取消发布</span>
                        <router-link
                            :to="`/edit/PublishPics?id=${row.id}`"
                            class="handler"
                            >编辑</router-link
                        >
                        <span class="handler" @click="toTop(row.id)">置顶</span>
                        <el-popconfirm
                            title="确定要删除此条动态?"
                            @confirm="deleteDynamics(row.id)"
                        >
                            <template #reference>
                                <span class="handler">删除</span>
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { computed, onMounted, ref } from "vue";
import { useCenter } from "@/stores/modules/center";
import Moment from "moment";
import { ElMessage } from "element-plus";

// 下拉框
const resourceList = ref([
    {
        label: "全部资源",
        value: "",
    },
    {
        label: "作品",
        value: "original",
    },
    {
        label: "教程",
        value: "course",
    },
    {
        label: "动态",
        value: "information",
    },
    {
        label: "专题",
        value: "specialTopic",
    },
]);
const statusList = ref([
    {
        label: "全部",
        value: 0,
    },
    {
        label: "已发布",
        value: 1,
    },
    {
        label: "未发布",
        value: 2,
    },
    {
        label: "审核中",
        value: 3,
    },
    {
        label: "审核未通过",
        value: 4,
    },
    {
        label: "仅主页可见",
        value: 5,
    },
]);
// 下拉框的结果
const classification = ref("");
const status = ref(0);

// 搜索框数据
const keyword = ref("");
const dynamics = useCenter();
// 获取表格数据
const tableData = computed(() => {
    return dynamics.dynamicsList;
});
// 置顶数据
const toTop = (id: string) => {
    let temp = tableData.value.find((item) => item.id == id);
    let index = tableData.value.findIndex((item) => item.id == id);
    tableData.value[index] = tableData.value[0];
    tableData.value[0] = temp;
    ElMessage.success("置顶成功");
};
// 删除数据
const deleteDynamics = (id: string) => {
    let index = tableData.value.findIndex((item) => item.id == id);
    tableData.value.splice(index, 1);
    ElMessage.success("删除成功");
};
onMounted(() => {
    dynamics.getDynamaicsList();
});
</script>

<style scoped lang="less">
.title-card {
    // 去除el-card的padding
    /deep/.el-card__body {
        padding: 0 !important;
    }
    .title {
        float: left;
        padding: 28px 30px;
        color: #111;
        font-size: 14px;
        position: relative;
    }
}
// 设置下拉框选中的颜色
.el-select-dropdown__item.selected {
    color: #f93684 !important;
}
.content-card {
    // 去除el-card的padding
    /deep/.el-card__body {
        padding: 0 !important;
    }
    .operator_line {
        display: flex;

        padding: 16px 30px;
        .input {
            width: 270px;
            height: 40px;
        }
        .search_btn {
            background: #f5f7f9;
            border-radius: 4px;
            color: #7d8090;
            font-size: 14px;
            display: inline-block;
            padding: 12px 17px;
            width: 62px;
            height: 40px;
            margin-left: 10px;
            margin-right: 30px;
            cursor: pointer;
            &:hover {
                background: #bcc4cc;
            }
        }
        .select_area {
            display: flex;
            align-items: center;
            span {
                font-size: 16px;
                margin-right: 10px;
                // line-height: 32px;
            }
            .select {
                width: 191px;
                height: 32px;
                line-height: 32px;
                font-size: 10px !important;
                margin-right: 10px;
            }
        }
    }
    // 表格区域
    // // 设置表头的背景颜色
    // /deep/ .table {
    //     background: #e2d2d2;
    // }
    .table {
        padding: 0 30px;

        .time {
            text-align: center;
        }
        .table_one {
            display: flex;
            padding: 10px 0;
            .img {
                width: 169px;
                height: 101px;
                border-radius: 10px;
            }
            .desc {
                padding-left: 17px;
                .content {
                    cursor: pointer;
                    font-size: 14px;
                }
                .type {
                    font-size: 14px;
                    color: rgb(125, 128, 144);
                    padding-top: 14px;
                    text-align: start;
                }
            }
        }
        .table_two {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            .item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 50%;
                .iconfont {
                    text-align: center;
                    width: 12px;
                    height: 12px;
                }
                .count {
                    text-align: center;
                    // box-sizing: border-box;
                    margin-top: 8px;
                    display: block;
                    margin-left: 4px;
                }
            }
        }
        .table_three {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            .desc {
                color: rgb(125, 128, 144);
            }
            .why {
                cursor: pointer;
                color: rgb(253, 89, 17);
            }
        }
        .table_four {
            display: flex;
            flex-direction: column;
            align-items: center;
            .handler {
                cursor: pointer;
                color: #111;
                font-weight: 400;
                font-size: 14px;
                &:hover {
                    color: rgb(253, 89, 17);
                }
            }
        }
    }
}
</style>
